<template>
  <div class="recommend-teacher">
    <i class="iconfont icon-fanhui fanhui" @click="back"></i>
    <p class="title">推荐的老师</p>
    <div class="group" v-for="(item,index) in teacherList" @click="toTeacherDetail(item.id)">
      <div class="container">
        <img class="avatar" :src="item.avatar" alt="">
        <div class="message">
          <div class="top">
            <p class="name">{{item.name}}</p>
            <p class="price">￥{{item.price}}起</p>
          </div>
          <div class="center">
            <div class="stars">
              <img v-for="(item1,index1) in item.star" class="star" src="../static/img/star.png" alt="">
            </div>
            <p class="text">教龄{{item.teachYear}}|已授{{item.teachAllCourse}}课</p>
          </div>
          <div class="bottom">
            <span v-for="(item2,index2) in item.some">{{item2}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        teacherList: [
          {
            id: 1,
            avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1424990591,1336401881&fm=27&gp=0.jpg',
            name: '小初高数学麦老师',
            price: 230,
            star: 4,
            teachYear: 18,
            teachAllCourse: 223,
            some: [
              '在线课',
              '朋友团',
              '杯赛经验',
              '基础提高',
              '中考'
            ]
          },
          {
            id: 1,
            avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1424990591,1336401881&fm=27&gp=0.jpg',
            name: '小初高数学麦老师',
            price: 230,
            star: 4,
            teachYear: 18,
            teachAllCourse: 223,
            some: [
              '在线课',
              '朋友团',
              '杯赛经验',
              '基础提高',
              '中考'
            ]
          },
          {
            id: 1,
            avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1424990591,1336401881&fm=27&gp=0.jpg',
            name: '小初高数学麦老师',
            price: 230,
            star: 4,
            teachYear: 18,
            teachAllCourse: 223,
            some: [
              '在线课',
              '朋友团',
              '杯赛经验',
              '基础提高',
              '中考'
            ]
          }
        ]
      }
    },
    methods: {
      back() {
        this.$router.go(-1)
      },
      toTeacherDetail(id) {
        this.$router.push({path: `/teacherdetail?id=${id}`})
      }
    }
  }
</script>

<style scoped>
  .recommend-teacher {
    position: relative;
  }

  .fanhui {
    position: absolute;
    left: 15px;
    width: 25px;
    height: 25px;
    font-size: 18px;
  }

  .title {
    text-align: center;
    font-size: 18px;
    margin-top: 15px;
  }

  .group {
    padding: 15px 0;
    border-bottom: 15px solid #E8E8E8;
  }

  .group .container {
    display: flex;
    align-items: center;
  }

  .group .container .avatar {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: 5px;
    margin: 0 15px;
  }

  .group .container .message {
    flex: 1;
  }

  .group .container .message .top {
    display: flex;
  }

  .group .container .message .top .name {
    flex: auto;
    font-size: 18px;
  }

  .group .container .message .top .price {
    flex: auto;
    text-align: right;
    color: orange;
  }

  .group .container .message .center {
    display: flex;
    margin: 5px 0;
  }

  .group .container .message .center .star {
    flex: 1;
    width: 15px;
    height: 15px;
  }

  .group .container .message .center .text {
    flex: 1;
    font-size: 15px;
    color: #ccc;
  }

  .group .container .message .bottom {
    display: flex;
  }

  .group .container .message .bottom span {
    flex: auto;
    background: #F0F0F0;
    margin-left: 3px;
    font-size: 13px;
    text-align: center;
    color: #ccc;
    border-radius: 3px;
  }
</style>
